<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
export default {
    name: 'Billboards',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            window.viewer.scene.globe.depthTestAgainstTerrain = true;

            // window.viewer.entities.add({
            //     position: window.Cesium.Cartesian3.fromDegrees(116, 33),//86.66, 28.1
            //     billboard: {
            //         image: require("@/assets/images/marker2.png"),
            //         scale: 1.5,
            //         verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM
            //     },
            // });

            let entity = window.viewer.entities.add({
                position: window.Cesium.Cartesian3.fromDegrees(86.66, 28.1),
                billboard: {
                    show: true,
                    image: require("@/assets/images/marker.png"),
                    scale: 1,
                    pixelOffset: new window.Cesium.Cartesian2(0, 0),
                    eyeOffset: new window.Cesium.Cartesian3(0, 0, 0),
                    horizontalOrigin: window.Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: window.Cesium.VerticalOrigin.BOTTOM,
                    heightReference: window.Cesium.HeightReference.CLAMP_TO_GROUND,
                    color: window.Cesium.Color.CHARTREUSE,
                    rotation: 0,
                    sizeInMeters: false,
                    // width:60,
                    // height:60,
                    // scaleByDistance:new window.Cesium.NearFarScalar(1000, 2, 5000, 0.1)
                    // translucencyByDistance:new window.Cesium.NearFarScalar(1000, 1, 5000, 0.1)
                    // pixelOffsetScaleByDistance:new window.Cesium.NearFarScalar(1000, 1, 5000, 10)
                    // imageSubRegion: new window.Cesium.BoundingRectangle(1, 1, 30, 50)
                    // distanceDisplayCondition: new window.Cesium.DistanceDisplayCondition(1000.0, 6000.0)
                    // disableDepthTestDistance:2000
                },
            });
            window.viewer.flyTo(entity)
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  